<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-12-18 15:55:20
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-10-08 15:31:39
 * @FilePath: RightTable.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <!-- 学校通话清单查询 -->
    <div class="callList" :style="'width:100%;height:' + rightTableHeight + 'px;overflow: hidden;'">
        <div class="searchList" ref="searchListRef">
            <SearchComp>
                <RowItem label="学校" :span="12" class="paddingr16">
                    <el-select size="small" v-model="personQuery.school_id" filterable :clearable="false"
                        @change="selectSchool" style="width: 100%;" placeholder="请选择学校">
                        <el-option v-for="item in schoolList" :key="item.school" :label="item.school_name"
                            :value="item.school">
                        </el-option>
                    </el-select>
                </RowItem>
                <RowItem label="班级" :span="12" class="paddingl16">
                    <el-cascader size="small" :options="classList" @change="search" v-model="class_ids"
                        style="width:100%;" placeholder="请选择班级" collapse-tags filterable :props="{
        checkStrictly: true,
        multiple: false,
        value: 'id',
        label: 'name',
        children: 'childrens',
    }" clearable></el-cascader>
                </RowItem>
                <RowItem label="时间" :span="24">
                    <el-date-picker size="small" style="width:100%" @change="datePickerChanged" v-model="datevalue"
                        :clearable="false" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </RowItem>
                <RowItem label="搜索" :span="24">
                    <div class="row align-items">
                        <el-input size="small" v-model="personQuery.name" @input="search"
                            placeholder="请输入关键字搜索"></el-input>
                        <el-button class="btnBox" :loading="loading" @click="Export">{{ loading ? '正在导出,请稍等' : '导出数据'
                            }}</el-button>
                    </div>
                </RowItem>
            </SearchComp>
        </div>
        <div style="position: relative;">
            <div class="loading-flex-box" v-show="listLoading">
                <dv-loading>加载中...</dv-loading>
            </div>
            <el-table :data="tableData" size="small" :height="tableHeight" style="width: 100%;background: transparent;"
                :header-cell-style="headerCellstyle" stripe class="elTable" :border="false">
                <el-table-column v-if="!personQuery.school_id" show-overflow-tooltip label="学校" width=""
                    prop="student_name" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.schoolname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="班级" width="100" prop="student_name" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.gradename }}-{{ scope.row.classesname }}</span>
                    </template>
                </el-table-column>
                <el-table-column width="70" prop="longSuccessCount" sortable show-overflow-tooltip label="有效/次"
                    align="center">
                    <template v-slot="scope">
                        <span style="color: #16F5FF;">{{ scope.row.longSuccessCount }}</span>
                    </template>
                </el-table-column>
                <el-table-column width="70" prop="failOrShortCount" sortable show-overflow-tooltip label="无效/次"
                    align="center">
                    <template v-slot="scope">
                        <span style="color: #16F5FF;">{{ scope.row.failOrShortCount }}</span>
                    </template>
                </el-table-column>
                <el-table-column width="120" show-overflow-tooltip :label="`姓名(${totalCount}人次)`" prop="name"
                    align="center">
                </el-table-column>
                <el-table-column show-overflow-tooltip width="250" label="时间" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.minCallTime }}~{{ scope.row.maxCallTime }}</span>
                    </template>
                </el-table-column>
                <template slot="empty" v-if="isNodata">
                    <NoDate title="暂无数据"></NoDate>
                </template>
                <!-- <template v-else slot="append">
                <div slot="append" style="text-align: center;padding:10px;font-size: 16px;color: #5278fc;">
                    <p v-if="listLoading"><i class="el-icon-loading" style="margin-right: 10px;" />加载中···</p>
                    <div v-if="noMore">没有更多了</div>
                </div>
            </template> -->
            </el-table>
        </div>
    </div>
</template>
<script>
// 引入防抖函数
import utils from '../util/debounce.js'
export default {
    name: 'RightTable',
    props: {
        rightTableHeight: {
            type: Number,
            default: 0
        },
        schoolList: {
            type: Array,
            default: []
        },
    },
    data() {
        return {
            value: '',
            datevalue: [this.getToday(), this.getToday()],
            class_ids: [],
            classList: [],
            tableHeight: 0,
            tableData: [],
            total: 1,
            personQuery: {
                school_id: '',
                startTime: this.getToday(),
                endTime: this.getToday(),
                name: '',
            },
            listLoading: false,
            loadNum: 0,
            noMore: false,
            disabled: false,
            loading: false,
            isNodata: true,
            totalCount: 0
        }
    },
    watch: {
        rightTableHeight: {
            handler(newVal) {
                setTimeout(() => {
                    this.getTableHeight()
                }, 0);
            }
        },
        schoolList: {
            async handler(newVal) {
                if (newVal.length > 0) {
                    // this.personQuery.school_id = newVal[0].school
                    await this.getClass()
                    await this.getList()
                }
            }
        },
    },
    async mounted() {
        await this.getToday()
        // await this.getShoolList()

        window.addEventListener('resize', () => {
            setTimeout(async () => {
                await this.getTableHeight()
            }, 120)
        })
    },
    methods: {
        getToday() {
            const now = new Date();
            return [now.getFullYear(), (now.getMonth() + 1).toString().padStart(2, "0"), now.getDate().toString().padStart(2, "0")].join('-');
        },
        async selectSchool(val) {
            this.class_ids = []
            await this.getClass()
            await this.getList()
        },
        // 根据选择的学校获取相应的班级
        async getClass() {
            const params = {
                school: this.personQuery.school_id
            }
            const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/getSubOrgList', {
                params: params
            })
            this.classList = res
        },
        // 计算表格的高度
        getTableHeight() {
            this.tableHeight = this.rightTableHeight - this.$refs.searchListRef.clientHeight
        },
        // 单元格表头的设置
        headerCellstyle({ row, column, rowIndex, columnIndex }) {
            return 'background:#082667!important;color: #FFFFFF;font-size: 12px;'
        },
        // 获取列表
        async getList() {
            this.listLoading = true
            const params = {
                orgId: this.class_ids && this.class_ids.length > 0 ? this.class_ids[this.class_ids.length - 1] : this.personQuery.school_id,
                startTime: this.personQuery.startTime,
                endTime: this.personQuery.endTime,
                name: this.personQuery.name,
            }
            const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/queryStudentCallTime', {
                params: params
            })
            this.tableData = res.data
            this.totalCount = res.totalCount
            this.tableData.forEach(item => {
                item.longSuccessCount = Number(item.longSuccessCount)
                item.failOrShortCount = Number(item.failOrShortCount)
            });
            this.isNodata = this.tableData.length > 0 ? false : true
            this.listLoading = false
        },
        // 条件搜索
        search: utils.debounce(function () {
            this.getList()
        }, 500),
        datePickerChanged(val) {
            if (val && val.length > 0) {
                this.personQuery.startTime = val[0]
                this.personQuery.endTime = val[1]
            } else {
                this.personQuery.startTime = ''
                this.personQuery.endTime = ''
            }
            this.getList()
        },
        // 导出数据
        async Export() {
            this.loading = true
            const params = {
                orgId: this.class_ids && this.class_ids.length > 0 ? this.class_ids[this.class_ids.length - 1] : this.personQuery.school_id,
                startTime: this.personQuery.startTime,
                endTime: this.personQuery.endTime,
                name: this.personQuery.name,
            }
            this.$http({
                methods: 'get',
                url: '/TalkScreen/Api/HlPhone/exportStudentCallList',
                responseType: 'blob',
                params: params
            }).then(res => {
                var blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
                var downloadElement = document.createElement('a')
                var href = window.URL.createObjectURL(blob) // 创建下载的链接
                downloadElement.href = href
                downloadElement.download = '通话清单.xls' // 下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() // 点击下载
                document.body.removeChild(downloadElement) // 下载完成移除元素
                window.URL.revokeObjectURL(href) // 释放掉blob对象
                this.loading = false
            })
        }
    },

}
</script>
<style lang="less" scoped>
.btnBox {
    padding: 0 20px;
    height: 32px;
    line-height: 32px;
    background: linear-gradient(180deg, #02DFFA 0%, #1764F2 100%);
    font-size: 12px;
    cursor: pointer;
    margin-left: 10px;
    border-radius: 0px;
    border: none;
    color: #ffffff;
}

/deep/ .el-button.is-loading:before {
    display: none;
}
</style>